<template>
  <el-tabs style="height: 1200px" v-model="activeName" type="border-card">
    <el-tab-pane name="first" style="height: 1000px" label="继续还款">
      <div style="float: left; width: 1030px; height: 130px; background-color: #FFFFE0; border-radius: 8px">
        <div style="margin-left: 30px; margin-top: 10px; color: #FF8800; font-size: 14px">
          <div>
            <span>1. 学生贷款期限内可以进行还款支付</span>
          </div>
          <br/>
          <div>
            <span>2. 如果需要逾期处理，请自行进行展期申请</span>
          </div>
          <br/>
          <div>
            <span>3. 还款金额以实际贷款的总额为准</span>
          </div>
          <br/>
          <div>
            <span>4. 还款记录会以订单显示</span>
          </div>
        </div>
      </div>
      <el-form :rules="rules" label-position="right" label-width="180px" style="margin-left: 100px; margin-top: 10px; float: left" :model="form">
        <el-form-item>
          <el-tag effect="dark" type="success" size="small">累计已还款的总金额为</el-tag> {{ alreadyRepayTotalMoney }} 元
          <el-tag style="margin-left: 30px" effect="dark" type="danger" size="small">仍需还款金额为</el-tag> {{ alreadyCreditTotalMoney - alreadyRepayTotalMoney > 0 ? alreadyCreditTotalMoney - alreadyRepayTotalMoney : 0  }} 元
        </el-form-item>
        <el-form-item label="请输入本次还款金额">
          <el-input v-model="form.repayMoney" style="width: 400px"></el-input>
          <el-tag style="margin-left: 30px" effect="dark" type="info" size="small">您总共贷款</el-tag> {{ alreadyCreditTotalMoney }} 元
        </el-form-item>
        <el-form-item label="请选择付款方式">
          <svg style="width: 30px; height: 30px; float: left; margin-left: 20px; margin-top: 4px" t="1607400296981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3133" width="200" height="200"><path d="M230.771014 576.556522c-12.614493 9.646377-25.228986 23.744928-28.93913 42.295652-5.194203 24.486957-0.742029 55.652174 22.26087 80.13913 28.93913 28.93913 72.718841 37.101449 92.011594 38.585508 51.2 3.710145 106.110145-22.26087 147.663768-50.457971 16.324638-11.130435 43.77971-34.133333 70.492754-69.750725-59.362319-30.423188-133.565217-64.556522-212.22029-61.588406-41.553623 1.484058-70.492754 9.646377-91.269566 20.776812zM983.188406 712.347826c25.971014-61.588406 40.811594-129.113043 40.811594-200.347826 0-281.971014-230.028986-512-512-512S0 230.028986 0 512s230.028986 512 512 512c170.666667 0 321.298551-83.849275 414.794203-212.22029C838.492754 768.742029 693.797101 696.023188 604.011594 652.985507c-42.295652 48.973913-105.368116 97.205797-176.602898 117.982609-44.521739 13.356522-85.333333 18.550725-126.886957 9.646377-42.295652-8.904348-72.718841-28.197101-90.527536-47.489855-8.904348-10.388406-19.292754-22.26087-27.455073-37.843479 0.742029 0.742029 0.742029 2.226087 0.742029 2.968116 0 0-4.452174-7.42029-7.420289-19.292753-1.484058-5.936232-2.968116-11.872464-3.710145-17.808696-0.742029-4.452174-0.742029-8.904348 0-12.614493-0.742029-7.42029 0-15.582609 1.484058-23.744927 4.452174-20.776812 12.614493-43.77971 35.617391-65.298551 48.973913-48.231884 115.014493-50.457971 149.147826-50.457971 50.457971 0.742029 138.017391 22.26087 212.22029 48.973913 20.776812-43.77971 34.133333-89.785507 42.295652-121.692754H304.973913v-33.391304h158.052174v-66.782609H272.324638v-34.133333h190.701449v-66.782609c0-8.904348 2.226087-16.324638 16.324638-16.324637h74.944927v83.107246h207.026087v33.391304H554.295652v66.782609H719.768116S702.701449 494.933333 651.501449 586.202899c115.014493 40.811594 277.518841 104.626087 331.686957 126.144927z m0 0" fill="#06B4FD" p-id="3134"></path></svg>
          <el-radio style="margin-left: 10px; float: left" v-model="form.repayType" label="支付宝" border>支付宝</el-radio>
          <svg style="width: 40px; height: 40px; float: left" t="1607400457629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3975" width="200" height="200"><path d="M669.3 369.4c9.8 0 19.6 0 29.4 1.6C671 245.2 536.9 152 383.2 152 211.6 152 71 269.7 71 416.8c0 85 45.8 156.9 124.2 210.9l-31.1 93.2L273.6 667c39.2 8.2 70.3 16.3 109.5 16.3 9.8 0 19.6 0 31.1-1.6-6.5-21.3-9.8-42.5-9.8-65.4 0.1-135.7 116.2-246.9 264.9-246.9z m-168.4-85c24.5 0 39.2 16.3 39.2 39.2 0 22.9-16.3 39.2-39.2 39.2-24.5 0-47.4-16.4-47.4-39.2 0-24.5 24.6-39.2 47.4-39.2z m-216.3 73.1c-24.7 0-47.8-16.2-47.8-38.8 0-24.3 24.7-38.8 47.8-38.8s39.5 16.2 39.5 38.8c0.1 22.7-16.4 38.8-39.5 38.8z" fill="#24DB5A" p-id="3976"></path><path d="M953.8 613c0-125.9-124.2-227.2-264.8-227.2-148.8 0-266.5 103-266.5 227.2 0 125.9 117.7 227.2 266.5 227.2 31.1 0 62.1-8.2 93.2-16.3l85 47.4-22.9-78.5c62.1-47.4 109.5-109.5 109.5-179.8z m-351.5-39.2c-14.7 0-31.1-14.7-31.1-31.1 0-14.7 16.3-31.1 31.1-31.1 22.9 0 39.2 16.3 39.2 31.1 0 16.4-14.7 31.1-39.2 31.1z m178-7.6c-14.8 0-31.3-14.6-31.3-30.7 0-14.6 16.5-30.7 31.3-30.7 23.1 0 39.5 16.2 39.5 30.7 0 16.2-16.4 30.7-39.5 30.7z" fill="#24DB5A" p-id="3977"></path></svg>
          <el-radio style="margin-left: 10px; float: left" v-model="form.repayType" label="微信" border>微信</el-radio>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.repayRemark" :rows="3" style="width: 400px"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="doPay" type="primary" style="margin-left: 420px;">确认支付</el-button>
    </el-tab-pane>
    <el-tab-pane name="second" style="height: 1200px">
      <span slot="label"><i class="el-icon-date"></i> 交易记录</span>
      <div>
        <!--还款数据-->
        <el-row :gutter="20">
          <el-col :span="20" :xs="24">
            <el-form style="margin-top: 20px; margin-left: 16px" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
              <el-form-item label="还款金额" prop="repayMoney">
                <el-input
                  v-model="queryParams.repayMoney"
                  placeholder="请输入还款金额"
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="还款时间">
                <el-date-picker
                  v-model="dateRange"
                  size="small"
                  style="width: 240px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-table
          :data="payList"
          style="width: 100%">
          <el-table-column
            align="center"
            width="140"
            label="系统订单号"
            prop="orderNo">
          </el-table-column>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商户订单号">
                  <span>{{ props.row.outTradeNo }}</span>
                </el-form-item>
                <el-form-item label="支付订单号">
                  <span>{{ props.row.payNo }}</span>
                </el-form-item>
                <el-form-item label="支付金额">
                  <span>{{ props.row.money }}</span>
                </el-form-item>
                <el-form-item label="商品简称">
                  <span>{{ props.row.body }}</span>
                </el-form-item>
                <el-form-item label="支付商户号">
                  <span>{{ props.row.mchid }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            width="122"
            align="center"
            label="商户订单号"
            prop="outTradeNo">
          </el-table-column>
          <el-table-column
            width="120"
            align="center"
            label="支付订单号"
            prop="payNo">
          </el-table-column>
          <el-table-column
            align="center"
            label="支付金额"
            prop="money">
          </el-table-column>
          <el-table-column
            width="120"
            align="center"
            label="支付商户号"
            prop="mchid">
          </el-table-column>
          <el-table-column
            width="120"
            align="center"
            label="商品简称"
            prop="body">
          </el-table-column>
          <el-table-column
            align="center"
            label="支付渠道"
            prop="payChannel" >
            <template slot-scope="scope">
              {{ scope.row.payChannel === 'wxpay' ? '微信扫码' : '支付宝扫码'}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="支付状态"
            prop="payStatus">
            <template slot-scope="scope">
              <svg v-if="scope.row.payStatus === 1" style="width: 24px; height: 24px" t="1604766596398" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2973" width="200" height="200"><path d="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m-50.432-326.101333L310.613333 504.32a32 32 0 0 0-45.226666 45.226667l174.72 174.762666a32.341333 32.341333 0 0 0 0.341333 0.341334l0.256 0.213333a32 32 0 0 0 50.048-6.144l337.450667-379.605333a32 32 0 1 0-47.872-42.496l-318.762667 358.613333z" fill="#52C41A" p-id="2974"></path></svg>
              <svg v-else style="width: 20px; height: 20px" t="1604766752939" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4359" width="200" height="200"><path d="M549.044706 512l166.189176-166.249412a26.383059 26.383059 0 0 0 0-36.98447 26.383059 26.383059 0 0 0-37.044706 0L512 475.015529l-166.249412-166.249411a26.383059 26.383059 0 0 0-36.98447 0 26.383059 26.383059 0 0 0 0 37.044706L475.015529 512l-166.249411 166.249412a26.383059 26.383059 0 0 0 0 36.98447 26.383059 26.383059 0 0 0 37.044706 0L512 548.984471l166.249412 166.249411a26.383059 26.383059 0 0 0 36.98447 0 26.383059 26.383059 0 0 0 0-37.044706L548.984471 512zM512 1024a512 512 0 1 1 0-1024 512 512 0 0 1 0 1024z" fill="#E84335" p-id="4360"></path></svg>
            </template>
          </el-table-column>
          <el-table-column
            width="140"
            align="center"
            label="下单时间"
            prop="addTime">
          </el-table-column>
          <el-table-column
            align="center"
            label="支付方式"
            prop="payType">
            <template slot-scope="scope">
              {{ scope.row.payType === 'wxpay' ? '微信' : '支付宝'}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="附加数据"
            prop="attach">
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-tab-pane>
    <el-dialog
      style="margin-top: 80px; margin-left: 20px"
      :visible.sync="isShowQrcode"
      width="28%"
    >
      <img v-if="alipayQrcode" :src="alipayQrcode" style="width: 240px; height: 240px; margin-left: 34px; margin-top: -10px">
      <svg @click="doPay" style="width: 20px; height: 20px; position: absolute; margin-top: 236px; margin-left: -126px" t="1604740343715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1278" width="200" height="200"><path d="M513.34 831.74C337.03 831.74 193.6 688.31 193.6 512c0-71.09 23.31-138.85 65.53-194.03v51.61c0 17.67 14.33 32 32 32s32-14.33 32-32V239.45c0-5.87-1.59-11.36-4.34-16.09-0.06-0.1-0.11-0.2-0.17-0.3-0.16-0.28-0.34-0.55-0.51-0.82-0.13-0.2-0.26-0.41-0.39-0.61-0.08-0.13-0.17-0.25-0.26-0.37a35.5 35.5 0 0 0-1.58-2.13c-6.81-8.35-16.96-12.35-26.95-11.69h-130c-17.67 0-32 14.33-32 32s14.33 32 32 32h55.35C159.8 339 129.6 423.35 129.6 512c0 51.79 10.15 102.05 30.17 149.38 19.33 45.7 46.99 86.74 82.23 121.97 35.23 35.23 76.27 62.9 121.97 82.23 47.33 20.02 97.59 30.17 149.38 30.17 17.67 0 32-14.33 32-32s-14.34-32.01-32.01-32.01zM855.38 762.3h-51.23c19.81-23 36.93-48.3 50.75-75.22 27.6-53.74 42.18-114.28 42.18-175.08 0-51.79-10.15-102.05-30.17-149.38-19.33-45.7-46.99-86.73-82.23-121.97-35.23-35.23-76.27-62.9-121.97-82.23-47.33-20.02-97.59-30.17-149.38-30.17-17.67 0-32 14.33-32 32s14.33 32 32 32c176.31 0 319.74 143.44 319.74 319.74 0 78.31-27.68 151.61-77.6 209.05l0.24-56.04c0.08-17.67-14.19-32.06-31.86-32.14h-0.14c-17.61 0-31.92 14.24-32 31.86l-0.55 129.43a31.988 31.988 0 0 0 9.32 22.71 31.68 31.68 0 0 0 5.33 4.3c0.02 0.01 0.04 0.02 0.06 0.04 0.48 0.31 0.97 0.61 1.47 0.89l0.15 0.09c0.5 0.28 1 0.54 1.51 0.8 0.03 0.01 0.05 0.03 0.08 0.04 1.64 0.8 3.34 1.46 5.1 1.98 0.01 0 0.02 0.01 0.03 0.01 0.55 0.16 1.1 0.3 1.66 0.43 0.07 0.02 0.15 0.03 0.22 0.05 0.5 0.11 1 0.21 1.5 0.3 0.1 0.02 0.2 0.04 0.3 0.05 0.48 0.08 0.96 0.15 1.44 0.21 0.11 0.01 0.23 0.03 0.34 0.04 0.48 0.05 0.95 0.09 1.43 0.12l0.34 0.03c0.53 0.03 1.07 0.04 1.61 0.05h132.31c17.67 0 32-14.33 32-32s-14.31-31.99-31.98-31.99z" p-id="1279"></path></svg>
      <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
  </el-tabs>
</template>

<script>
  import { realPay, selectPayOrderListBySysUser, wxPay } from '../../../api/alipay/repay'
  export default {
    data() {
      return {
        alreadyCreditTotalMoney: '',
        alreadyRepayTotalMoney: '',
        activeName: 'first',
        payStatus: 0,
        isShowQrcode: false,
        alipayQrcode: null,
        rules: {
          repayMoney: [
            { required: true, message: '请输入本次即将还款的金额', trigger: 'blur' },
          ],
          repayType: [
            { required: true, message: '请选择支付方式', trigger: 'change' }
          ]
        },
        options: [
          "支付宝",
          "微信"
        ],
        // 日期范围
        dateRange: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          repayMoney: undefined,
          repayDate: undefined,
        },
        payList: [],
        form: {
          repayMoney: '0.01',
          repayType: '',
          repayName: '学生还款',
          repayRemark: ''
        }
      }
    },

    methods: {

      createWebSocket() {
        // 注意这里的端口号是后端服务的端口号，后面的是后端正常请求的路径，ziyuan是我的项目名，最后面的是我放在cookie中的当前登陆用户
        let websocket = new WebSocket('ws://localhost:8080/webSocket/' + this.$store.state.user.name)
        // 连接成功时
        websocket.onopen = () => {
          console.log('websocket连接成功!')
        }
        websocket.onmessage = event => {
          // 后端发送的消息在event.data中
          console.log(event.data)
          this.payStatus = event.data
          if (this.payStatus === "1") {
            this.isShowQrcode = false
            this.msgSuccess('支付成功!')
            this.payStatus = ''
            this.activeName = 'second'
            websocket.close()
            this.getList()
          }
        }
        websocket.onclose = function() {
          console.log('关闭了')
        }
        // 路由跳转时结束websocket链接
        this.$router.afterEach(function() {
          websocket.close()
        })
        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
        window.onbeforeunload = function() {
          websocket.close()
        }
      },

      // 发起支付宝支付
      doPay() {
        // 判断是支付宝还是微信
        if (this.form.repayType === '支付宝') {
          this.isShowQrcode = true
          var formData = new FormData()
          formData.append("totalFree", this.form.repayMoney)
          formData.append("userId", this.$store.state.user.userId)
          realPay(formData).then(res => {
            console.log(res)
            this.alipayQrcode = res.result
          })
        } else if (this.form.repayType === '微信') {
          this.isShowQrcode = true
          var formData = new FormData()
          formData.append("totalFree", this.form.repayMoney)
          formData.append("userId", this.$store.state.user.userId)
          wxPay(formData).then(res => {
            console.log(res)
            this.alipayQrcode = res.result
          })
        }

      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      getList() {
        this.loading = true;
        selectPayOrderListBySysUser(this.$store.state.user.name).then(res => {
            this.payList = res.data
            console.log(res)
            if (res.msg === '您还没有支付记录') {
              this.msgInfo('您还没有支付记录哦!');
            } else {
              this.total = res.data.length;
            }
            this.loading = false;
          }
        );
      },

      // 获取当前用户的订单
      getPayListBySysUser() {
        selectPayOrderListBySysUser(this.$store.state.user.name).then(res => {
          console.log(res)
          console.log('当前用户的订单')
          console.log('已贷款的总金额为' + res.creditMoney)
          console.log('已还款的总金额为' + res.totalMoney)
          this.alreadyCreditTotalMoney = res.creditMoney
          this.alreadyRepayTotalMoney = res.totalMoney
          console.log(res.data)
        })
      }
    },
    mounted() {
      this.getList()
      this.createWebSocket()
      this.getPayListBySysUser()
    }
  }
</script>

<style scoped>

</style>
